<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/jsp/common/taglibs.jsp"%>
<bsl:layout-render name="/WEB-INF/jsp/common/layout.jsp">
<bsl:layout-component name="html-head">
	<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/css/jquery.fileupload-ui.css" />
	<link rel="stylesheet" href="<%=request.getContextPath()%>/css/jqtransform.css" type="text/css" media="all" />
	<link rel="stylesheet" href="<%=request.getContextPath()%>/css/viewStarComment.css" type="text/css" media="all" />
	
	<script charset="utf-8" src="<%=request.getContextPath()%>/editor/kindeditor-min.js"></script>
	<script charset="utf-8" src="<%=request.getContextPath()%>/editor/lang/zh_CN.js"></script>
	
	<script src="<%=request.getContextPath()%>/js/jquery.ui.widget.js"></script>
	<script src="<%=request.getContextPath()%>/js/tmpl.js"></script>
	<script src="<%=request.getContextPath()%>/js/load-image.js"></script>
	<script src="<%=request.getContextPath()%>/js/canvas-to-blob.min.js"></script>
	<script src="<%=request.getContextPath()%>/js/bootstrap.min.js"></script>
	<script src="<%=request.getContextPath()%>/js/bootstrap-image-gallery.js"></script>
	<script src="<%=request.getContextPath()%>/js/jquery.iframe-transport.js"></script>
	<!-- The basic File Upload plugin -->
	<script src="<%=request.getContextPath()%>/js/jquery.fileupload.js"></script>
	<!-- The File Upload file processing plugin -->
	<script src="<%=request.getContextPath()%>/js/jquery.fileupload-fp.js"></script>
	<!-- The File Upload user interface plugin -->
	<script src="<%=request.getContextPath()%>/js/jquery.fileupload-ui.js"></script>
	<script src="<%=request.getContextPath()%>/js/locale.js"></script>
	<script src="<%=request.getContextPath()%>/js/upload.main.js"></script>
	<script src="<%=request.getContextPath()%>/js/jquery.jqtransform.js"></script>
	<script>
	var editors = [];
	
	$(function(){
		var options1 = {navigation: 'hover',direction:  'left'};
	     $('.ppy1').popeye(options1);
		$("#offerRate").val('${subComment.offerRateObject.integerPart}');
		var editorList = $("textarea[name='comment.content']");
		$.each(editorList, function(i, val) {
			KindEditor.ready(function(K) {
			editors[i] =	K.create(val, {
					resizeType : 1,
					allowPreviewEmoticons : false,
					allowImageUpload : true,
					filePostName:'kindImgFile',
					uploadJson:'harry/fileUpload',
					afterUpload : function(self, data) {
		                  addCommentPhotos(data.id, val.parentNode.id);
		               },
		               afterChange : function() {
						      //限制字数
						      var limitNum = 500;  //设定限制字数
						      var pattern = '还可以输入' + limitNum + '字';
						      $('#' + val.parentNode.id +'1').html(pattern); //输入显示
						      if(this.count('text') > limitNum) {
						       pattern = ('字数超过限制，请适当删除部分内容');
						       //超过字数限制自动截取
						       var strValue = editor.text();
						       strValue = strValue.substring(0,limitNum);
						       editor.text(strValue);      
						       } else {
						       //计算剩余字数
						       var result = limitNum - this.count('text');
						       pattern = '还可以输入' +  result + '字';
						       }
						       $('#' + val.parentNode.id +'1').html(pattern); //输入显示
						      ////////
						     } ,
					items : [
						 'emoticons', '|', 'image']
				});
			});
		});
	});
	

	function sync() {
		$.each(editors, function(i, editor) {
			editor.sync("comment.content");
		});
	}

	function articleComment(form)
	{
		sync();
		form.submit();
	}

	function replyComment(form) {
		sync();
		form.submit();
		
	}
	</script>
	
</bsl:layout-component>
<bsl:layout-component name="title">
${comment.title }-评论
</bsl:layout-component>
<bsl:layout-component name="content" >
<c:set var="contextPath" value="<%=request.getContextPath()%>"></c:set>
<div class="head_nav" >
	<c:choose>
		<c:when test="${comment.property == 1}">
			<c:set value="评论区" var="area"></c:set>
			<c:set value="viewCommentList" var="navAction"></c:set>
		</c:when>
		<c:when test="${comment.property == 3}">
			<c:set value="讨论区" var="area"></c:set>
			<c:set value="viewDiscussList" var="navAction"></c:set>
		</c:when>
	</c:choose>
	<a href="${contextPath}/viewArticleDetails?article.id=${comment.article.id}" rel="external" title="${comment.article.title}">${comment.article.title}</a>
	<c:if test="${not empty area}">
		&nbsp;&gt;&gt;&nbsp; <a href="${contextPath}/${navAction}?article.id=${comment.article.id}">${area}</a>&nbsp;&gt;&gt;&nbsp; 
	</c:if>
	

	<span style="color: #888;font-size: 20px;font-weight: bold;">
		${comment.title}
	</span>

</div>


   <div style="border-bottom:1px dashed #ccc;padding-bottom:20px;">
       	<div class="wbavatar">
          		 <a href="#" onclick="return false;" target="_blank"><img src="${contextPath}${comment.createByUser.headPhoto.thumbnailMini}" alt="" title=""></a>
      		</div>
	         <div class="wb_cmR comm_main">
	             <div class="user_info" >
	             	<div class="info_left entry-meta" >
	             		<a href="${contextPath }/viewCustomerInfo?customer.id=${comment.createByUser.id}" title="${comment.createByUser.userName}" target="_blank">${comment.createByUser.userName}</a>
	                  <span>
	                  	<jsp:include page="../common/timeFormat.jsp">
							<jsp:param value="${comment.createTime.time}" name="time"/>
							<jsp:param value="${comment.createTime.year }" name="year"/>
							<jsp:param value="${comment.createTime.month }" name="month"/>
							<jsp:param value="${comment.createTime.day}" name="day"/>
							<jsp:param value="${comment.createTime.hours}" name="hours"/>
							<jsp:param value="${comment.createTime.minutes}" name="minutes"/>
							<jsp:param value="${comment.createTime.date}" name="date"/>
						</jsp:include>
	                  </span>
	                  	<c:set var="isAdmin" value="no"></c:set>
							<c:forEach var="role" items="${user.roles}">
								<c:choose>
									<c:when test="${role.name eq 'admin'}">
										<c:set var="isAdmin" value="yes"></c:set>
									</c:when>
								</c:choose>
							</c:forEach>
							<c:if test="${ isAdmin eq 'yes' || user.userName eq article.user.userName}">
								&nbsp;|&nbsp;<a href="${contextPath}/deleteComment?comment.id=${comment.id}&article.id=${comment.article.id}" >删除</a>
							</c:if>
	             	</div>
	                 
	            </div>
	            <c:if test="${comment.property == 1}">
	             <div class="user_rate_s" style="margin-left: 5px;">
					    <div class="big_rate_bak_s">
					        <b rate="2">&nbsp;</b>
					        <b rate="4">&nbsp;</b>
					        <b rate="6">&nbsp;</b>
					        <b rate="8">&nbsp;</b>
					        <b rate="10">&nbsp;</b>
					        <div id="big_rate_up_c${comment.id}" class="big_rate_up_s" style="width: 123.20000000000002px; display: block; height: 26px; " ></div>
					    </div>
					</div>
					<script type="text/javascript">
					 showRateSmall('c${comment.id}', '${comment.offerRateObject.integerPart}', '${comment.offerRateObject.integerPart}');
					</script>
					</c:if>
	             <div style="clear: left;" class="entry-content">${comment.content}</div>
	            </div>
        	
 </div>
<div style="text-align: center;margin-top: 20px">
      		<button onclick="scoreComment('${comment.id}', 1)" type="button" class="btn btn-info">支持</button><span style="color: #aaa" id="goodComm${comment.id}">(${comment.goodNum})</span>&nbsp;&nbsp;
      		<button onclick="scoreComment('${comment.id}', 2)" type="button" class="btn">反对</button><span style="color: #aaa" id="badComm${comment.id}">(${comment.badNum})</span>
      	</div>
<div class="commListTitle" >${comment.subCommNum}条评论</div>
	        
<div class="wc_list" >
        <c:forEach var="subComment" varStatus="vs" items="${subComments}">
            <div class="wc_list_nod">
	               <div>
	                	<div class="wbavatar">
                    		 <a href="#" onclick="return false;" target="_blank"><img src="${contextPath}${subComment.user.headPhoto.thumbnailMini}" alt="" title=""></a>
                		</div>
		                <div class="wb_cmR comm_main">
		                    <div class="user_info">
		                    	<div class="info_left  entry-meta">
		                    		<a href="${contextPath }/viewCustomerInfo?customer.id=${subComment.user.userId}" title="${subComment.user.userName}" target="_blank">${subComment.user.userName}</a>
			                        <span>
			                        		<jsp:include page="../common/timeFormat.jsp">
												<jsp:param value="${subComment.createTime.time}" name="time"/>
												<jsp:param value="${subComment.createTime.year }" name="year"/>
												<jsp:param value="${subComment.createTime.month }" name="month"/>
												<jsp:param value="${subComment.createTime.day}" name="day"/>
												<jsp:param value="${subComment.createTime.hours}" name="hours"/>
												<jsp:param value="${subComment.createTime.minutes}" name="minutes"/>
												<jsp:param value="${subComment.createTime.date}" name="date"/>
											</jsp:include>
			                        </span>
			                        	<c:set var="isAdmin" value="no"></c:set>
										<c:forEach var="role" items="${user.roles}">
											<c:choose>
												<c:when test="${role.name eq 'admin'}">
													<c:set var="isAdmin" value="yes"></c:set>
												</c:when>
											</c:choose>
										</c:forEach>
										<c:if test="${ isAdmin eq 'yes' || user.userName eq article.user.userName}">
											&nbsp;|&nbsp;<a href="${contextPath}/deleteComment?comment.id=${subComment.id}&article.id=${comment.article.id}&parentComment.commentId=${comment.id}" >删除</a>
										</c:if>
		                    	</div>
			                    <div class="info_right">
		                       	  <a onclick="scoreComment('${subComment.id}', 1)">支持<span id="goodComm${subComment.id}">(${subComment.goodNum})</span></a><a onclick="scoreComment('${subComment.id}', 2)">反对<span id="badComm${subComment.id}">(${subComment.badNum})</span></a><a onclick="switchReply('comm${subComment.id}','${user.userName}', '${contextPath}/viewLogin')">回应(${subComment.subCommNum})</a><a target="_blank" href="${contextPath}/viewComment?comment.id=${subComment.id}">详细</a>
		                        </div>     
			                  </div>
			                  <c:choose>
								<c:when test="${not empty subComment.album.photos}">
									<div style="width: 70%;float:left" class="entry-content">${subComment.brief}</div> 
								</c:when>
								<c:otherwise>
									<div style="width: 95%" class="entry-content">${subComment.brief}</div> 
								</c:otherwise>
							</c:choose>
					
		               </div>
                  </div>
 				</div>
            	 <c:if test="${not empty subComment.album.photos}">
            	 	<div class="ppy1" style="margin-left: 80%;float: none;margin-top: 35px" >
								<ul class="ppy-imglist">
									<c:forEach items="${subComment.album.photos}" var="photo">
										<li>
							                  <a href="${contextPath}${photo.thumbnailLarge}">
							                      <img src="${contextPath}${photo.thumbnailSmall}" alt="">
							                  </a>
							                  <c:if test="${not empty photo.description}">
							                  	<span class="ppy-extcaption">
							                      <strong>${photo.description}</strong>
							                  	</span>
							                  </c:if>
							                  
							              </li>
									</c:forEach>
							              
							      </ul>
							        <div class="ppy-outer">
							                <div style="background-image: url(&quot;${contextPath}${subComment.album.coverPhoto.thumbnailSmall}&quot;);" class="ppy-stage">
							                    <div class="ppy-counter">
							                        <strong class="ppy-current">1</strong> / <strong class="ppy-total">9</strong> 
							                    </div>
							               	</div>
							                <div class="ppy-nav">
							                        <a class="ppy-next" title="下一张">下一张</a>
							                        <a class="ppy-prev" title="上一张">上一张</a>
							                </div>
							       </div>
							       <div style="visibility: hidden; height: 0px; overflow: hidden;" class="ppy-caption">
							                <span class="ppy-text">
							                        <strong>Eyes of a Holcocephala fusca Robber Fly</strong><br>shot by flickr member Thomas Shahan<br>
							                        <a href="http://www.flickr.com/photos/opoterser/3760102198/">View on flickr.com</a>
							                </span>
							       </div>
						</div>
            	 </c:if>	
            	 <div style="clear: both"></div>
            	 <c:choose>
            	 	<c:when test="${empty subComment.parentComment}">
            	 		<div class="wb_cmR comm_main">
            	 			 <div class="feedback_deleted" >
								<span class="entry-content">引用信息已被删除</span>
							</div>
			                   
		                </div>
            	 	</c:when>
            	 	<c:otherwise>
            	 		<c:if test="${subComment.parentComment.commentId != comment.id}">
		            	 		<div class="wb_cmR comm_main">
		                     <div class="feedBack" >
							<div class="user_info">
								<div class="info_left entry-meta">
									<a href="${contextPath }/viewCustomerInfo?customer.id=${subComment.parentComment.user.userId}" title="${subComment.parentComment.user.userName}" target="_blank">${subComment.parentComment.user.userName}</a>
									<span>
										<jsp:include page="../common/timeFormat.jsp">
											<jsp:param value="${subComment.parentComment.createTime.time}" name="time"/>
											<jsp:param value="${subComment.parentComment.createTime.year }" name="year"/>
											<jsp:param value="${subComment.parentComment.createTime.month }" name="month"/>
											<jsp:param value="${subComment.parentComment.createTime.day}" name="day"/>
											<jsp:param value="${subComment.parentComment.createTime.hours}" name="hours"/>
											<jsp:param value="${subComment.parentComment.createTime.minutes}" name="minutes"/>
											<jsp:param value="${subComment.parentComment.createTime.date}" name="date"/>
										</jsp:include>
									
									</span>
								</div>
								<div class="info_right ">
		                      	  		<a onclick="scoreComment('${subComment.parentComment.commentId}', 1)">支持<span id="goodComm${subComment.parentComment.commentId}">(${subComment.parentComment.goodNum})</span></a><a onclick="scoreComment('${subComment.parentComment.commentId}', 2)">反对<span id="badComm${subComment.parentComment.commentId}">(${subComment.parentComment.badNum})</span></a><a href="${contextPath}/viewComment?comment.id=${subComment.parentComment.commentId}">回应(${subComment.parentComment.subCommNum})</a>
		                       	</div> 
							</div>
							<c:choose>
								<c:when test="${not empty subComment.parentComment.album.photos}">
									<div style="width: 65%;float:left" class="entry-content">${subComment.parentComment.brief}</div> 
								</c:when>
								<c:otherwise>
									<div style="width: 95%" class="entry-content">${subComment.parentComment.brief}</div> 
								</c:otherwise>
							</c:choose>
							
							  <c:if test="${not empty subComment.parentComment.album.photos}">
		            	 	    <div class="ppy1" style="margin-left: 71%;float: none;margin-top: 35px" >
										<ul class="ppy-imglist">
											<c:forEach items="${subComment.parentComment.album.photos}" var="photo">
												<li>
									                  <a href="${contextPath}${photo.thumbnailLarge}">
									                      <img src="${contextPath}${photo.thumbnailSmall}" alt="">
									                  </a>
									                  <c:if test="${not empty photo.description}">
									                  	<span class="ppy-extcaption">
									                      <strong>${photo.description}</strong>
									                  	</span>
									                  </c:if>
									                  
									              </li>
											</c:forEach>
									              
									      </ul>
									        <div class="ppy-outer">
									                <div style="background-image: url(&quot;${contextPath}${subComment.parentComment.album.coverPhoto.thumbnailSmall}&quot;);" class="ppy-stage">
									                    <div class="ppy-counter">
									                        <strong class="ppy-current">1</strong> / <strong class="ppy-total">9</strong> 
									                    </div>
									               	</div>
									                <div class="ppy-nav">
									                        <a class="ppy-next" title="下一张">下一张</a>
									                        <a class="ppy-prev" title="上一张">上一张</a>
									                </div>
									       </div>
									       <div style="visibility: hidden; height: 0px; overflow: hidden;" class="ppy-caption">
									                <span class="ppy-text">
									                        <strong>Eyes of a Holcocephala fusca Robber Fly</strong><br>shot by flickr member Thomas Shahan<br>
									                        <a href="http://www.flickr.com/photos/opoterser/3760102198/">View on flickr.com</a>
									                </span>
									       </div>
								</div>
		            	   </c:if>
						  </div> 
		            	 </div>
		            </c:if>
		            	  
            	 	</c:otherwise>
            	 	</c:choose>
            	 
           <div style="clear: both"></div>
           <div id="comm${subComment.id}" class="pub_area" style="margin-top: 30px;float: left">
        	
            <div class="wbavatar">
                      <a href="#" onclick="return false;" target="_blank"><img src="${contextPath}${user.headPhoto.thumbnailMini}" alt="" title=""></a>
             </div>
             	<form action="${contextPath}/saveSubComment" method="post">
             		
	                <div class="wb_cmR wbPubbox"" >
	                			
	                    <div id="formContent${subComment.id}">
	                    	<div id="formContent${subComment.id}1" class="word_surplus sign-text"></div>
	                    	<textarea id="reply${subComment.id}" name="comment.content" style="height:63px;width:518px;"></textarea>
	                    	<input  type="hidden" name="article.id" value="${comment.article.id}">
	                    	<input type="hidden" name="parentComment.commentId" value="${subComment.id}"  />
	                    	<input type="hidden" name="superComment.commentId" value="${comment.id}"  />
	                    </div>
	                    
	                    <div class="WB_pubBoxPlus" style="text-align: right;width: 85%">
	                            <div style="padding-top:3px;margin-right: 13px;" >
	                            	<button style="margin-top: 5px;" onclick="replyComment(this.form)" type="button" class="btn"  >回 应</button>
	                            </div>
	                        </div>
	                </div>
               </form>
            </div>
            
     </c:forEach>
 </div>
      <c:choose>
		<c:when test="${page.currentPage<=4 && page.totalPage >5}">
			<c:set var="startPage"  value="1"></c:set>
			<c:set var="endPage"  value="5"></c:set>
			<c:set var="firstStyle"  value="display: none;"></c:set>
			<c:set var="lastStyle"  value=""></c:set>
		</c:when>
		<c:when test="${page.currentPage<=4 && page.totalPage <=5}">
			<c:set var="startPage"  value="1"></c:set>
			<c:set var="endPage"  value="${page.totalPage}"></c:set>
			<c:set var="firstStyle"  value="display: none;"></c:set>
			<c:set var="lastStyle"  value="display: none;"></c:set>
		</c:when>
		
		<c:when test="${page.currentPage>4 && page.currentPage <= page.totalPage- 4}">
			<c:set var="startPage"  value="${page.currentPage-2}"></c:set>
			<c:set var="endPage"  value="${page.currentPage+2}"></c:set>
			<c:set var="firstStyle"  value=""></c:set>
			<c:set var="lastStyle"  value=""></c:set>
		</c:when>
		
		<c:when test="${page.currentPage>4 && page.currentPage > page.totalPage- 4}">
			<c:set var="startPage"  value="${page.totalPage-4}"></c:set>
			<c:set var="endPage"  value="${page.totalPage}"></c:set>
			<c:set var="firstStyle"  value=""></c:set>
			<c:set var="lastStyle"  value="display: none;"></c:set>
		</c:when>
	</c:choose>
	<c:choose>
		<c:when test="${page.currentPage == 1}">
			<c:set var="prevStyle" value="display: none;"></c:set>
		</c:when>
		<c:otherwise>
			<c:set var="prevStyle" value=""></c:set>
		</c:otherwise>
	</c:choose>

	<c:choose>
		<c:when test="${page.totalPage == 0 || page.currentPage == page.totalPage}">
			<c:set var="nextStyle" value="display: none;"></c:set>
		</c:when>
		<c:otherwise>
			<c:set var="nextStyle" value=""></c:set>
		</c:otherwise>
	</c:choose>
   <div style="clear: both"></div>
	<div class="msdn">
		<a href="viewComment?comment.id=${comment.id}&page.currentPage=${page.currentPage-1}" style="${prevStyle}" >上一页</a>
		<a href="viewComment?comment.id=${comment.id}&page.currentPage=1" style="${firstStyle}" >1</a><span style="${firstStyle}">...</span>
		<c:if test="${endPage != 1 }">
			<c:forEach var="i" begin="${startPage }" end="${endPage }" step="1">
			<c:choose>
				<c:when test="${i == page.currentPage}">
					<span class="current">${i}</span>
				</c:when>
				<c:otherwise>
					<a href="viewComment?comment.id=${comment.id}&page.currentPage=${i}">${i}</a>
				</c:otherwise>
			</c:choose>
		</c:forEach>
		</c:if>
		<span style="${lastStyle}">...</span>
		<a href="viewComment?comment.id=${comment.id}&page.currentPage=${page.totalPage}" style="${lastStyle}" >${page.totalPage}</a>
		<a href="viewComment?comment.id=${comment.id}&page.currentPage=${page.currentPage+1}" style="${nextStyle}" >下一页</a>
	</div>
	<div style="float:none; left;width: 100%;"><button type="button" class="btn btn-danger" onclick="switchReply('pub_area','${user.userName}', '${contextPath}/viewLogin')">发表评论</button></div>
        
        
        <div id="pub_area" class="pub_area" style="margin-top: 10px;">
        	
            <div style="float: left; margin-right:20px">
                      <a href="#" onclick="return false;" target="_blank"><img src="${contextPath}${user.headPhoto.thumbnailMini}" alt="" title=""></a>
             </div>
             	<form action="${contextPath}/saveSubComment" method="post">
             		
	                <div class="wb_cmR wbPubbox"" >
	                			
	                    <div id="formContent${comment.id}">
	                    	<div id="formContent${comment.id}1" class="word_surplus sign-text"></div>
	                    	<textarea name="comment.content" style="height:63px;width:518px;"></textarea>
	                    	<input  type="hidden" name="article.id" value="${comment.article.id}">
	                    	<input type="hidden" name="parentComment.commentId" value="${comment.id}"  />
	                    	<input type="hidden" name="superComment.commentId" value="${comment.id}"  />
	                    </div>
	                    
	                    <div class="WB_pubBoxPlus" style="text-align: right;width: 85%">
	                            <div style="padding-top:3px;margin-right: 13px;" >
	                            	<button type="button" class="btn" onclick="articleComment(this.form)">评论</button>
	                            </div>
	                        </div>
	                </div>
               </form>
            </div>

</bsl:layout-component>
</bsl:layout-render>